import "./app.css";
import { useEffect } from "react";
import { Outlet } from "react-router-dom";
import { getLoginRecord, useMainStore } from "@/store/mainStore";
import SideBar from "@/components/side-bar";
import { Modal, Spin, message } from "antd";
import { useShallow } from "zustand/react/shallow";
import { ServerGetUserInfo } from "@go/app/ServerApp";
import { http } from "@/constant/status";

function App() {
  const { appLoading, isLogin, token } = useMainStore(
    useShallow((state) => ({
      appLoading: state.appLoading,
      isLogin: state.isLogin,
      token: state.token,
    }))
  );

  async function getUserInfo(token: string) {
    useMainStore.setState({ appLoading: true });
    try {
      const res = await ServerGetUserInfo(token);
      if (res.code !== http.StatusOK) {
        message.error(res.msg);
      }
      console.log("用户信息", res.data);
      useMainStore.setState({ userInfo: res.data });
    } catch (err) {
      message.error(`获取用户信息失败: ${err}`);
    } finally {
      useMainStore.setState({ appLoading: false });
    }
  }

  useEffect(() => {
    if (isLogin && token !== "") {
      getUserInfo(token);
      getLoginRecord(token);
    } else {
      useMainStore.setState({ userInfo: {}, loginRecordList: [] });
    }
  }, [isLogin, token]);

  useEffect(() => {}, []);

  return (
    // <Spin spinning={appLoading}>
    <div id="app">
      <SideBar />
      <div className="content">
        <Outlet />
      </div>
    </div>
    // </Spin>
  );
}

export default App;
